<template>
    <div class="home-back-style">

        <div class="home-top-style" id="home-top" ref="homeTop">
            <el-carousel :interval="4000"  type="card">
              <el-carousel-item class="home-banner-boder" v-for="item in this.phoneAlbumLists" :key="item.photoIndex">
                <button class="home-banner-btn" @click="gophotolist(item.photoIndex)">
                <div class="home-banner-cover">
                  <p>{{ item.albumName }}:({{item.count}}) </p>
                </div>
                <img class="home-banner-img" :src= '"/api/cover/" + item.localIdentifier'>
                </button>
              </el-carousel-item>
            </el-carousel>
        </div>

        <div class="home-bottom-style" :style="{height:comBottomH + 'px'}">
            <!-- 左边的手机图片 -->
            <div class="home-iphonex-style">
                <el-collapse v-model="activeNames" @change="handleChange">
                  <el-collapse-item title="使用说明" name="1">
                    <div>请确保手机跟电脑连接同一WiFi</div>
                    <div>如果图片没有加载出来需要在iPhone中设置相册权限</div>
                    <div>iPhone设置-找到当前APP-设置APP获取相册的读取和写入权限</div>
                    <img src="../../assets/使用说明.png">
                  </el-collapse-item>
                  <el-collapse-item title="常见问题" name="2">
                    <div>如果已经获取相册的权限,照片还没出现在网页!请退出APP再重新打开即可!</div>
                    <div>如果开启服务失败,请检查是否正在使用同类型的APP!需要关闭其他APP!</div>
                    <div>下载图片时,请误退出APP!</div>
                    <div>在APP中避免屏幕锁屏!</div>
                    <div>如果有问题可以发邮件,cocoazxy@gmail.com!</div>
                  </el-collapse-item>
                </el-collapse>
             </div>

            <!-- 右边的手机信息div -->
            <div class="home-phone-message-style">
                <el-card class="box-card">
                  <div slot="header" class="clearfix">
                    <p class="home-username">{{phoneOfUserInfo.userName}}<small>({{phoneOfUserInfo.iphoneName}})</small></p>
                    <p class="home-phone-message-text">手机存储:{{phoneOfUserInfo.usededDiskMemoryInfo}}/{{phoneOfUserInfo.totalDiskMemoryInfo}}</p>
                    <el-progress :text-inside="true" :stroke-width="18" :percentage="progress"></el-progress>
                  </div>
                  <div v-for="item in this.phoneAlbumLists" :key="item.photoIndex" class="text item">
                    <span>相册名称:{{item.albumName}} 照片数量{{item.count}}</span>
                  </div>
                </el-card>
            </div>
        </div>

    </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      isMounted: false,
      initBottom: 300,
      phoneAlbumLists:[],
      phoneOfUserInfo:{},
      progress:0,
      activeNames: ['1'],
    };
  },
  computed: {
    comBottomH() {
      if (this.isMounted) {
        let homeTopH = this.$refs.homeTop.clientHeight;
        let bodyH = window.innerHeight;
        this.initBottom = bodyH - homeTopH - 60;
        return this.initBottom;
      }
    }
  },
  mounted() {
    this.isMounted = true;
  },
  created () {
    this.loadPhoneDevieMessage();
    this.loadPhoneAlbumList();
  },
  methods: {
    loadPhoneDevieMessage() {
      axios
        .get("/api/deviceInfo/")
        .then(response => {
          this.phoneOfUserInfo = response.data;
          this.progress = parseInt(this.phoneOfUserInfo.usededMemory/this.phoneOfUserInfo.totalMemory*100);
        })
        .catch(error => {
          console.log(error);
        });
    },
    loadPhoneAlbumList() {
      axios
      .get("/api/media_list")
      .then(res => {
        this.phoneAlbumLists = res.data;
      }).catch(error=>{
        console.log(error);
      });
    },
    gophotolist(selectedIndex){
      this.$router.push({path:'/phoneLists',query:{selectedIndex}});
      // this.$router.push({path:'/phoneLists',query:{selectedIndex:index,dataSource:this.phoneAlbumLists}});
    },
  }
};
</script>

<style>
.home-back-style {
  overflow: hidden;
  margin: 0px;
  height: 100%;
  background-color: #F2F6FC;
}
.home-top-style {
  margin-top: 30px;
  width: 100%;
  background-color: #F2F6FC;
  /* position: relative; */
}
.home-banner-boder{
  border: #F2F6FC 5px solid;
}
.home-banner-btn{
  width: 100%;
  height: 100%;
}
.home-banner-cover{
  position: absolute;
  background-color: rgba(0,0,0,0.5); 
  bottom: 0px;
  width: 100%;
  text-align: center;
  vertical-align:middle; 
}
.home-banner-cover p{
  color: #FFFFFF;
}
.home-banner-img{
  display: inline-block;
  max-width: 100%;
  vertical-align: middle;
  overflow: hidden;
  margin: 0;
  height: 100%;
  background-repeat: no-repeat;
  background-position:center center;
  background-size: cover;
}

.home-bottom-style {
  width: 100%;
  margin-top: 30px;
  background-color: #F2F6FC;
  position: relative;
}

.home-iphonex-style {
  width: 30%;
  height: 100%;
  background-color: white;
  float: left;
}

.home-phone-message-style {
  position: absolute;
  width: 70%;
  background-color:white;
  float: left;
  margin: 0px;
  right: 0px;
  height: 100%;
}
.home-username {
  margin: 0px;
  color: #409EFF;
  font-size: 24px;
  text-align: left;
  width: 100%;
}
.home-phone-message-text {
  color: #409EFF;
  text-align: left;
  margin: 0px;
}

.el-carousel {
  height: 100%;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}
.el-collapse-item__content img{
  width: 100%;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.home-phone-message-style .item{
  text-align: left;
  color: #409EFF; 
  padding: 5px;
}

</style>
